<template>
  <!--home-->
  <div>
    <!-- 顶部--开始 -->
    <el-row type="flex" justify="center" align="middle" class="licc-top-row" style="height: 10px"@mouseenter.native="mouseoutMategory"></el-row>
    <el-row type="flex" justify="center" align="middle" class="licc-top-row">
      <el-col style="width: 50px;height: 400px" @mouseenter.native="mouseoutMategory"></el-col>
      <el-col style="width: 160px; background-color: #fff">
        <div style="width: 160px; height: 390px;border: 1px solid #ccc; padding: 5px 0">
          <!--  左侧导航栏 -->
          <ul class="service-bd" role="menubar">
            <li
              v-for="(categoryTopInfo, index) in categoryTopInfos"
              :key="categoryTopInfo.sortOrder" @mouseover="mouseoverMategory(index)">
              <router-link :to="{path:'/goodsList',query:{catId:categoryTopInfo.id,catName:categoryTopInfo.catName}}" target="_blank">{{categoryTopInfo.catName}}</router-link>
              <i class="el-icon-arrow-right service-arrow"></i>
            </li>
          </ul>
        </div>
      </el-col>
      <el-col style="width: 10px;height: 400px"></el-col>
      <!-- 分类详情--开始 -->
      <el-col class="licc-category-info" :class="categoryShow?'licc-category-info-hover':''">
        <div class="licc-category-content"
             v-for="(categoryTopInfo, index) in categoryTopInfos"
             :key="categoryTopInfo.if" v-show="index===categoryInfoIndexShow?true:false">
             <!--:key="categoryTopInfo.sortOrder" v-show="index===categoryInfoIndexShow?true:false">-->
          <div class="service-panel"
               v-for="(categorySecInfo, indexSec) in categoryTopInfo.children"
               :key="categorySecInfo.id">
               <!--:key="categorySecInfo.sortOrder">-->
            <router-link :to="{path:'/goodsList',query:{catId:categorySecInfo.id,catName:categorySecInfo.catName}}" target="_blank"><h5>{{categorySecInfo.catName}}</h5></router-link>
            <p>
              <router-link
                v-for="(categoryThirdInfo, indexThird) in categorySecInfo.children"
                :key="categoryThirdInfo.id"
                :to="{path:'/goodsList',query:{catId:categoryThirdInfo.id,catName:categoryThirdInfo.catName}}" target="_blank">
                <a>{{categoryThirdInfo.catName}}</a>
              </router-link>
            </p>
          </div>
        </div>
      </el-col>
      <!-- 分类详情--结束 -->
      <!-- 轮播图--开始 -->
      <el-col class="licc-carousel-info" :class="categoryShow?'':'licc-category-info-hover'">
        <el-carousel height="400px" direction="vertical" :autoplay="true">
          <el-carousel-item v-for="(item,index) in bannerImgLst" :key="index">
            <el-image style="width: 930px; height: 400px" :src="item.url" fit="cover"></el-image>
          </el-carousel-item>
        </el-carousel>
      </el-col>
      <el-col style="width: 50px;height: 400px" @mouseenter.native="mouseoutMategory"></el-col>
    </el-row>
    <el-row type="flex" justify="center" align="middle" class="licc-top-row" style="height: 20px"@mouseenter.native="mouseoutMategory"></el-row>
    <!-- 轮播图--结束 -->
    <!-- 顶部--结束 -->
    <el-row type="flex" justify="center" align="middle" class="licc-top-row">
      <el-row class="licc-center">
        <!--新品上市--开始-->
        <el-row>
          <el-col class="licc-hr-col"><div class="licc-hr-div"></div></el-col>
          <el-col style="width: 160px; line-height: 30px; color:#222;">新品上市</el-col>
          <el-col class="licc-hr-col"><div class="licc-hr-div"></div></el-col>
        </el-row>
        <el-row>
          <el-col class="licc-goods-col"
                  v-for="(newGoods, index) in newGoodsList" :key="index">
            <div class="licc-goods-info">
              <div class="licc-goods-img">
                <!--<a href="">-->
                <router-link :to="{path:'/goodsInfo',query:{goodsId:newGoods.id,catId:newGoods.catId}}" target="_blank">
                  <el-image style="width:250px; height:320px" :src="newGoods.imgUrl" fit="cover" title="图片解释"></el-image>
                </router-link>
                <!--</a>-->
              </div>
              <div class="licc-goods-price">
                <strong class="J_price" data-price-plus="1"><em>¥</em><i>{{newGoods.shopPrice}}</i></strong>
              </div>
              <div class="licc-goods-name">
                <!--<a href="https://www.baidu.com" title="文字解释">-->
                <router-link :to="{path:'/goodsInfo',query:{goodsId:newGoods.id,catId:newGoods.catId}}" title="文字解释" target="_blank">
                  <em>{{newGoods.goodsName}}-{{newGoods.goodsBrief}}</em>
                </router-link>
                <!--</a>-->
              </div>
              <div class="licc-goods-commit">
                <strong>已有<router-link :to="{path:'/goodsInfo',query:{goodsId:newGoods.id,catId:newGoods.catId}}" target="_blank">{{commentNumShowRule(newGoods.commit)}}</router-link>条评价</strong>
              </div>
              <div class="licc-goods-integral">
                <strong>销量<router-link :to="{path:'/goodsInfo',query:{goodsId:newGoods.id,catId:newGoods.catId}}" target="_blank">{{commentNumShowRule(newGoods.integral)}}</router-link></strong>
              </div>
            </div>
          </el-col>
        </el-row>
        <!--新品上市--结束-->
        <!--热销商品--开始-->
        <el-row>
          <el-col class="licc-hr-col"><div class="licc-hr-div"></div></el-col>
          <el-col style="width: 160px; line-height: 30px; color:#222;">热销商品</el-col>
          <el-col class="licc-hr-col"><div class="licc-hr-div"></div></el-col>
        </el-row>
        <el-row>
          <el-row>
            <el-col class="licc-goods-col"
                    v-for="(hotGoods, index) in hotGoodsList" :key="index">
              <div class="licc-goods-info">
                <div class="licc-goods-img">
                  <!--<a href="">-->
                  <router-link :to="{path:'/goodsInfo',query:{goodsId:hotGoods.id,catId:hotGoods.catId}}" target="_blank">
                    <el-image style="width:250px; height:320px" :src="hotGoods.imgUrl" fit="cover" title="图片解释"></el-image>
                  </router-link>
                  <!--</a>-->
                </div>
                <div class="licc-goods-price">
                  <strong class="J_price" data-price-plus="1"><em>¥</em><i>{{hotGoods.shopPrice}}</i></strong>
                </div>
                <div class="licc-goods-name">
                  <!--<a href="https://www.baidu.com" title="文字解释">-->
                  <router-link :to="{path:'/goodsInfo',query:{goodsId:hotGoods.id,catId:hotGoods.catId}}" title="文字解释" target="_blank">
                    <em>{{hotGoods.goodsName}}-{{hotGoods.goodsBrief}}</em>
                  </router-link>
                  <!--</a>-->
                </div>
                <div class="licc-goods-commit">
                  <strong>已有<router-link :to="{path:'/goodsInfo',query:{goodsId:hotGoods.id,catId:hotGoods.catId}}" target="_blank">{{commentNumShowRule(hotGoods.commit)}}</router-link>条评价</strong>
                </div>
                <div class="licc-goods-integral">
                  <strong>销量<router-link :to="{path:'/goodsInfo',query:{goodsId:hotGoods.id,catId:hotGoods.catId}}" target="_blank">{{commentNumShowRule(hotGoods.integral)}}</router-link></strong>
                </div>
              </div>
            </el-col>
          </el-row>

        </el-row>
        <!--热销商品--结束-->
      </el-row>
    </el-row>
  </div>
</template>

<script>
import homeApi from '@/api/home'
export default {
  name: 'Home',
  data() {
    return {
      bannerImgLst:[],
      /** 新品推荐列表 **/
      newGoodsList:[],
      /** 热品推荐列表 **/
      hotGoodsList:[],
      /** 分类详情不显示 **/
      categoryShow:true,
      /** 分类默认显示0 **/
      categoryInfoIndexShow:0,
      /** 分类Top详情 **/
      categoryTopInfos:[],
    }
  },
  created(){
    this.initPage();
  },
  methods: {
    initPage(){
      homeApi.initHomeCategory().then(res => {
        /** 获取分类信息 **/
        this.categoryTopInfos = res.data.categories;
        this.bannerImgLst = res.data.photos;
      }).catch(() => {

      })
      homeApi.initShopgoodsList().then(res => {
        this.newGoodsList = res.data.newGoods;
        this.hotGoodsList = res.data.hotGoods;
      }).catch(()=>{

      });
    },
    mouseoverMategory(index){
      this.categoryShow = false;
      this.categoryInfoIndexShow = index;
    },
    mouseoutMategory(){
      this.categoryShow = true;
    },
    commentNumShowRule(num){
      if (num<10){
        return ''+num;
      } else if (num < 100){
        return (parseInt(num/10)*10)+'+';
      } else{
        return (parseInt(num/100)*100)+'+';
      }
    }
  }
}
</script>
<style>
  .service-bd {
    border-top: none;
    padding-top: 5px;
    padding-bottom: 3px;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 14px;
    color: #fff;
  }
  .service-bd li {
    overflow: hidden;
    line-height: 32px;
    height: 32px;
    position: relative;
    font-size: 14px;
    font-weight: 400;
    width: 160px;
    color: #666;
  }
  .service-bd li:hover{
    background-color: #F2F6FC;
    /*color: #f7b200;*/
  }
  .service-bd a {
    color: #666;
  }
  .service-arrow {
    position: absolute;
    right: 10px;
    line-height: 32px;
  }

  .licc-top-row{
    width: 100%;
  }
  /** 分类详情图 **/
  .licc-category-info{
    width: 930px;
    height: 400px;
    background-color: #fff;
    border: 1px solid #ccc;
  }
  .licc-category-info-hover{
    transition: none 0s ease 0s;
    display: none;
  }
  .licc-category-content{
    padding: 10px;
    width: 910px;
    height: 380px;
    text-align: left;
    overflow: hidden;
  }
  .service-panel h5 {
    position: relative;
    height: 36px;
    margin: 0;
    padding: 0;
    line-height: 36px;
    font-size: 16px;
    color: #333;
  }
  .service-panel p {
    min-height: 52px;
    overflow: hidden;
    line-height: 26px;
    margin: 0;
    padding: 0 0 10px 0;
  }
  .service-panel p a {
    color: #666;
    display: inline-block;
    margin-right: 12px;
    white-space: nowrap;
  }
  /** 轮播图 **/
  .licc-carousel-info{
    width: 930px;
  }
  .el-carousel__item img {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
    -webkit-background-size:cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }
  .licc-center{
    margin-top: 20px;
    width: 1100px;
  }
  .licc-hr-col{
    width: 470px;
    height: 30px;
  }
  .licc-hr-div{
    width: 100%;
    height: 0;
    border-top: 1px solid #222;
    margin:auto;
    margin-top: 15px;
  }
  .licc-goods-col{
    width: 265px;
    margin-left: 4px;
    margin-right: 4px;
    height: 450px;
    margin-top: 10px;
    background-color: #fff;
  }
  .licc-goods-col:hover{
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
  }
  .licc-goods-info{
    padding: 12px 7px;
    font: 12px/150% tahoma,arial,Microsoft YaHei,Hiragino Sans;
  }
  .licc-goods-img{
    height: 320px;
    margin-bottom: 5px;
  }
  .licc-goods-price{
    height: 22px;
    line-height: 22px;
    overflow: hidden;
    width: 100%;
    margin: 0 0 8px;
  }
  .J_price{
    float: left;
    margin-right: 10px;
    color: #e4393c;
    font-size: 20px;
  }
  .licc-goods-name{
    height: 40px;
    text-align: left;
    line-height: 20px;
    margin-bottom: 8px;
    overflow: hidden;
  }
  .licc-goods-name a{
    color: #666;
    text-decoration: none;
  }
  .licc-goods-name a:hover{
    color: #f30213;
  }
  .licc-goods-commit, .licc-goods-integral{
    width: 50%;
    float: left;
    height: 18px;
    margin-bottom: 8px;
    overflow: hidden;
  }
  .licc-goods-commit strong, .licc-goods-integral strong{
    float: left;
    margin-right: 10px;
    color: #a7a7a7;
  }
  .licc-goods-commit a, .licc-goods-integral a{
    color: #646fb0;
    text-decoration: none;
  }

</style>
